<template>
  <div>
    <el-dialog title="受试者档案" :visible.sync="dailogShow" :before-close="closeDialog" v-on:open="loadData"
               :close-on-click-modal="false">
      <el-tabs v-model="activeName">
        <el-tab-pane label="基础信息" name="first">
          <el-form :model="form" :inline="true" :rules="rules" ref="form" labelWidth="100px">
            <el-form-item label="姓名" labelWidth="140px">
              {{form.name}}
            </el-form-item>
            <el-form-item label="性别" labelWidth="40px">
              {{form.sex}}
            </el-form-item>
            <el-form-item label="身份证号" labelWidth="80px">
              {{form.cardid}}
            </el-form-item>
            <el-form-item label="年龄" labelWidth="40px">
              {{form.age}}
            </el-form-item>
            <br>
            <el-form-item label="筛选号">
              <el-input v-model="form.candidateNum" :readonly="true"></el-input>
            </el-form-item>
            <el-form-item label="随机号" property="randomNum">
              <el-input v-model="form.randomNum" :readonly="true"></el-input>
            </el-form-item>
            <el-form-item label="招募日期" >
              <el-date-picker
                v-model="form.recruitDate"
                type="date"
                :readonly="true">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="联系电话" prop="mobile" >
              <el-input v-model="form.mobile" :readonly="true"></el-input>
            </el-form-item>
            <el-form-item label="联系地址" prop="address" >
              <el-input v-model="form.address" :readonly="true"></el-input>
            </el-form-item>
            <el-form-item label="紧急联系人" prop="urgentContact" >
              <el-input v-model="form.urgentContact" :readonly="true"></el-input>
            </el-form-item>
            <el-form-item label="紧急联系电话" prop="urgentMobile" >
              <el-input v-model="form.urgentMobile" :readonly="true"></el-input>
            </el-form-item>
            <el-form-item label="最后随访日期">
              {{form.lastFlupDate}}
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="参与项目" name="third">
          <el-form :model="form" :inline="true" :rules="rules" ref="form" labelWidth="100px">
            <el-row>
              <el-col :span="24">
                <el-form-item style="width: 100%">项目名称：{{form.projectName}}</el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="筛选号" >{{form.candidateNum}}</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="招募日期">{{form.recruitDate}}</el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="筛选结果">{{form.candidateResult == 1?'失败':'成功'}}</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="通过筛选时间">{{form.passTime}}</el-form-item>
              </el-col>
            </el-row>
            <!--<el-form-item label="受试者号" property="subjectsNum"  >{{form.num}}</el-form-item>-->
            <el-form-item label="依从性评分">
              <el-rate
                v-model="complianceScore" show-text text-template="{value}" :texts="['1分','2分','3分','4分','5分']"
                :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
              </el-rate>
            </el-form-item>
            <el-form-item label="试验人员评价">
              <el-input type="textarea" style="width:400px;" :readonly="true" v-model="form.evaluate"></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
      <el-row>
        <el-col :span="24" style="padding:10px;">
          <div class="pull-right">
            <el-button @click.native.prevent="closeDialog">取消</el-button>
          </div>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
  import http from '../../../api/http'

  export default {
    value: '',
    data() {
      return {
        form: {},
        activeName: 'first',
        pickerOptions0: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;
          }
        },
        rules: {},
        read: false, complianceScore: null
      }
    },
    props: {
      dailogView: {
        type: Boolean,
        default: false
      },
      id:{
        type: String
      }
    },
    computed:{
      dailogShow:{
        get:function(){
          return this.dailogView
        },
        set: function () {
        }
      }
    },
    methods: {
      closeDialog() {
        this.$parent.closeSubjectsView();
        this.form = {};
      },
      loadData() {
        var vm = this;
        vm.read = false;
        http.postData(vm, "/pt/subjects/detail/" + vm.id, {}, function (resp) {
          var data = resp.body;
          if (data.code == 111) {
            if(data.value!=undefined)
            vm.form = data.value;
          }
        });
      }
    },
    created() {
    }
  }
</script>
<style>
</style>
